<template>
	<view>
		<form @submit="submit" @reset="reset">
			
			<view class="cell required">
				<view class="cell-title">地域</view>
				<picker class="cell-content" mode="region" @change="changeRegion">
					<view v-if="region.length>0">{{region.join(' - ')}}</view>
					<view v-else class="placeholder">请选择省市区</view>
				</picker>
			</view>
			
			<view class="cell required">
				<view class="cell-title">小区</view>
				<view class="cell-content">
					<xflSelect placeholder="请选择小区" :list="opts.communities" @change="selCommunity"></xflSelect>
					<view style="display: flex;margin-top: 10rpx;">
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="楼号" :list="opts.builds" @change="selBuilding"></xflSelect>
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="单元" :list="opts.units" @change="selUnit"></xflSelect>
						<xflSelect style="flex-grow: 1;flex-shrink: 1;" placeholder="房号" :list="opts.rooms" @change="selRoom"></xflSelect>
					</view>
				</view>
			</view>
			
			<view class="cell">
				<view class="cell-title">用户名称</view>
				<input class="cell-content" v-model="post.name" placeholder="请输入用户名称"/>
			</view>
			
			<view class="cell">
				<view class="cell-title">联系电话</view>
				<input class="cell-content" type="number" maxlength="11" v-model="post.phone" placeholder="请输入联系电话"/>
			</view>
			
			<view class="desc" style="margin-top: 76rpx;">
				1. 任何单位或个人未经产权人许可，不得绑定他人房号，因此造成的损失与法律责任将由绑定者承担;
				<br/>
				2. 在进行用水查询、水费缴费之前必须先进行房号绑定操作;
				<br/>
				3. 同一个微信号可以绑定多个房号
				<br/>
				4. 如您对以上提示有疑问，请拨打热线<br/>025-85660060。
			</view>
			<view class="bottom horizontal">
				<button style="color: white;background-color: var(--color-ok);" class="capsule scale" form-type="submit" @tap="submit">绑定</button>
			</view>
		</form>
	</view>
</template>

<script>
	import juFieldGroup from '../../components/ju-field/ju-field-group.vue';
	import juField from '../../components/ju-field/ju-field.vue';
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import validation from '@/static/validation.js'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	
	import roomCascade from '@/mixins/roomCascade.js'
	
	const app = getApp()

	export default {
		components:{
			juFieldGroup, juField, hgCell, xflSelect,
		},
		mixins:[roomCascade,],
		data() {
			return {
				post:{
					roomId: '',
					name: '',
					phone: '',
				}
			}
		},
		methods: {
			reset(){
				this.bind.cardNo=""
				this.bind.phone=""
			},
			
			checkPhone(phone){
				return /^1[3456789]\d{9}$/.test(phone)
			},
			
			submit(evt){
				uni.showLoading({
					title: '校验中...',
					mask: true
				});
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.url + 'bindWaterCard',
					method: 'POST',
					dataType: 'json',
					data: this.post,
					success: res => {
						uni.hideLoading()
						const {data} = res
						console.log(data)
						if(data.code==200){
							uni.showModal({
								showCancel:false,
								title:'绑定',
								content:'绑定成功！',
								success: (res) => {
									if(res.confirm){
										uni.navigateBack()
									}
								}
							})
						}else if(data.code==512){
							uni.showModal({
								title: '绑定房号',
								content: "该房号暂未开通，请先开通业务",
								showCancel: true,
								cancelText: '取消',
								confirmText: '去开通',
								success: res => {
									if(res.confirm){
										uni.navigateTo({
											url: '../install/install',
										});
									}
								},
							});
						}else{
							uni.showToast({
								title: data.message,
								icon:'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: err.errMsg,
							icon:'none'
						});
						console.error(err)
					},
				});
			}
		}
	}
</script>

<style>
	.label{
		background-color: lightgray;
	}
	
	.desc{
		width: 600rpx;
		margin: auto;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		color: #666666;
	}
</style>
